<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>租户列表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
    <link rel="stylesheet" type="text/css" href="${ctxPath}/static/police/libs/datepicker/css/foundation-datepicker.min.css">
    <link rel="stylesheet" type="text/css" href="${ctxPath}/static/police/css/common.css">
    <link rel="stylesheet" type="text/css" href="${ctxPath}/static/police/css/style.css">
</head>
<body>
<div class="embedLeft">
    <div class="breadcrumb">
        <span>人员管理</span>
        <b>租户列表</b>
    </div>
    <div class="embedRight">
        <div class="colum_wrap pt24">
            <form method="post" id="loginform" data-imgcode="imgcode" action="${ctxPath}/admin/tenant/">
            <div class="column_list clearfix">
                <div class="column">
                    <span class="label">选择日期</span>
                    <div class="colum_box"><input id="date1" name="startDate" placeholder="请选择日期" type="text"/></div>
                    <span class="fl until">至</span>
                    <div class="colum_box"><input id="date2" name="endDate"  placeholder="请选择日期" type="text"/></div>
                </div>
                <div class="column">
                    <span class="label">姓名</span>
                    <div class="colum_box"><input placeholder="请输入姓名"  name="name"  type="text"/></div>
                </div>
                <div class="column">
                    <span class="label">性别</span>
                    <div class="colum_box">
                        <div class="select_wrap">
                            <i class="i_drop"></i>
                            <span class="select_text"></span>
                            <select  name="sex">
                                <option >选择性别</option>
                                <option value="1">男</option>
                                <option value="2">女</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="column">
                    <span class="label">手机号</span>
                    <div class="colum_box"><input placeholder="请输入手机号" name="mobile"   type="text"/></div>
                </div>
                <div class="column">
                    <span class="label">身份证号</span>
                    <div class="colum_box"><input placeholder="请输入身份证号"  name="idCard"   type="text"/></div>
                </div>
                <div class="column">
                    <span class="label">入住状态</span>
                    <div class="colum_box">
                        <div class="select_wrap">
                            <i class="i_drop"></i>
                            <span class="select_text"></span>
                            <select   name="status"  >
                                <option>选择入住状态</option>
                                <option value="1">入住中</option>
                                <option value="2">未入住</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
                <div class="search_div"><button class="blueBtn" type="submit">搜索</button></div>
            </form>
        </div>
        <div class="table_Box">
            <table width="100%">
                <tr>
                    <th width="36"><span class="check"></span></th>
                    <th>手机号</th>
                    <th>姓名</th>
                    <th>注册时间</th>
                    <th>性别</th>
                    <th>出生日期</th>
                    <th>身份证号</th>
                    <th>身份证正面</th>
                    <th>身份证反面</th>
                    <th>入住状态</th>
                    <th>操作</th>
                </tr>
                @if(isNotEmpty(grid.rows)){
                @for(item in grid.rows){
                <tr>
                    <td><span data="${item.id}" class="i_check"></span></td>
                    <td>${item.mobile}</td>
                    <td>${item.name}</td>
                    <td>${item.createDate}</td>
                    <td>${item.sex==1?"男":"女"}</td>
                    <td>${item.birthday!,dateFormat="yyyy-mm-dd hh:mm"}</td>
                    <td>${item.idCard}</td>
                    <td><a  href="${item.idCardFront!}" target="_blank" ><img style="background: url(${item.idCardFront!}) no-repeat center center;background-size:cover;" height="100" width="150"/></a></td>
                    <td><a  href="${item.idCardReverse!}" target="_blank" ><img style="background: url(${item.idCardReverse!}) no-repeat center center;background-size:cover;" height="100" width="150"/></a></td>
                    @if(item.approve==3){
                    <td><span class="intake untake">申请中</span></td>
                    @}else if(isEmpty(item.tenantStatus)){
                    <td><span class="intake untake">未入住</span></td>
                    @}else if(item.tenantStatus==1){
                    <td><span class="intake ">已入住</span></td>
                    @}else if(item.tenantStatus==2){
                    <td><span class="intake untake">已退租</span></td>
                    @}
                    <td class="operate">
                        <span class="blue record" style="cursor:pointer;"  id="${item.id}">入住记录</span>
                        <span class="blue record2" style="cursor:pointer;"   id="${item.id}">开关锁记录</span>
                    </td>
                </tr>
                @}
                @}
                <tr style="display: none">
                    <td><span class="i_check"></span></td>
                    <td>13273863735</td>
                    <td>admin</td>
                    <td>张三</td>
                    <td>2018.08.31 13:00</td>
                    <td>男</td>
                    <td>2000.08.31</td>
                    <td>421002199409786483</td>
                    <td><img src="images/headImg.png"/></td>
                    <td><img src="images/headImg.png"/></td>
                    <td><span class="intake untake">未入住</span></td>
                    <td class="operate">
                        <span class="blue record"  >入住记录</span>
                        <span class="blue">开关锁记录</span>
                    </td>
                </tr>
            </table>
        </div>
        <div class="bottom_page clearfix">
            <div class="fl allcheck">
                <span class="i_check"></span>
                <span class="blueBtn ml12" id="exportBtn">一键导出</span>
            </div>
            <!--分页-->
            <div class="pagination paginationRt fr m-paging">
            </div>
            <!--分页 end-->
        </div>
    </div>
</div>

<script type="text/javascript" src="${ctxPath}/static/police/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="${ctxPath}/static/police/libs/datepicker/js/foundation-datepicker.js"></script>
<script type="text/javascript" src="${ctxPath}/static/police/libs/datepicker/js/locales/foundation-datepicker.zh-CN.js"></script>
<script type="text/javascript" src="${ctxPath}/static/police/js/base.js"></script>
<script type="text/javascript" src="${ctxPath}/static/police/js/paging.js"></script>
<script type="text/javascript" src="${ctxPath}/static/police/js/jsextend.js"></script>
<script src="${ctxPath}/static/blade/js/blade-ajax.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    var checkin = $('#date1').fdatepicker({
        onRender: function (date) {
            return '';
        },
        format: "yyyy-mm-dd",
    }).on('changeDate', function (ev) {
        if (ev.date.valueOf() > checkout.date.valueOf()) {
            var newDate = new Date(ev.date)
            newDate.setDate(newDate.getDate() + 1);
            checkout.update(newDate);
        }
        checkin.hide();
        $('#date2')[0].focus();

    }).data('datepicker');

    var checkout = $('#date2').fdatepicker({
        format: "yyyy-mm-dd",
        onRender: function (date) {
            return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
        }
    }).on('changeDate', function (ev) {
        checkout.hide();
    }).data('datepicker');

    var box = new popupBox({
        boxName:'box1',
        content:'<h3>确定一键导出所选租户？</h3>',
        confirmFn:function(e){
            var check = $(".i_checked");
            var ids = "";
            check.each(function(i, c) {
                if(ids.length!=0){
                    ids = ids +","
                }
                ids = ids+$(c).attr("data");
            });
            window.location.href = '${ctxPath}/admin/tenant/export?ids=' + ids;
        },
        cancelFn:function(e){
            console.log(e)
        }
    })
    $("#exportBtn").click(function(){
        box.show();
    })

    var box2 = new popupBox({
        boxName:'box1',
        content:'',
        width:'670',
        height:'550',
        confirmFn:function(e){
            console.log(e)
        }
    })

    $(".record").click(function(){
        var id = $(this).attr("id");
        var ajax = new Ajax("${ctxPath}/admin/tenant/tenantRoom", function(data){
            console.log(data);
            var model='';
            var len=data.rows.length;
            var list = data.rows;
            for(var i=0; i<len; i++){
                model+='<tr>'+
                    '<td>'+list[i].roomNo+'</td>'+
                    '<td>'+list[i].address+'</td>'+
                    '<td>'+list[i].statusName+'</td>'+
                    '<td>'+list[i].createDate+'</td>'+
                    '</tr>';
            }
            var _model='<div class="table_Box">' +
                '<table width="100%">'+
                '<tr>'+
                '<th>房间名</th>'+
                '<th>地址</th>'+
                '<th>状态</th>'+
                '<th>时间</th>'+
                '</tr>'+model+
                '</table>'+
                '</div>';
            box2.params.content=_model;
            box2.change();
            return false;
        });
        var param={
            id:id
        }
        ajax.data = param;
        ajax.start();
    })
    $(".record2").click(function(){
        var id = $(this).attr("id");
        var ajax = new Ajax("${ctxPath}/admin/tenant/openHistory?sort=id&order=desc", function(data){
            console.log(data);
            var model='';
            var len=data.rows.length;
            var list = data.rows;
            for(var i=0; i<len; i++){
                model+='<tr>'+
                    '<td>'+list[i].roomNo+'</td>'+
                    '<td>'+list[i].typeName+'</td>'+
                    '<td>'+list[i].address+'</td>'+
                    '<td>'+list[i].createDate+'</td>'+
                    '</tr>';
            }
            var _model='<div class="table_Box">' +
                '<table width="100%">'+
                '<tr>'+
                '<th>房间名</th>'+
                '<th>开锁方式</th>'+
                '<th>地址</th>'+
                '<th>时间</th>'+
                '</tr>'+model+
                '</table>'+
                '</div>';
            box2.params.content=_model;
            box2.change();
            return false;
        });
        var param={
            id:id
        }
        ajax.data = param;
        ajax.start();
    })
})
var pagingte = new paging({
    el: '.m-paging',   //分页器初始化元素
    maxPage: ${grid.total},                //最大页数
    index: ${grid.page},                 //当前页数
    page: 5,                    //最大展示页数
    url: '${ctxPath}/adminlandlord/index/',       //跳转地址
    urlParamName: 'page', //页数参数名
    isHref:true
});
</script>
</body>
</html>